<template>
  <div class="amap">
    <!-- 导航栏 -->
    <van-nav-bar title="门店导航" left-arrow :z-index="999" fixed @click-left="close" />

    <!-- 地图 -->
    <div id="areaContainer"></div>
  </div>
</template>

<script>
export default {
  name: "store-amap",
  props: {
    initAmap: {
      type: Boolean,
      default: false
    },
    bussinessInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      map: {},
      myPosition: {},
      destination: {},
      driving: {}
    };
  },
  watch: {
    initAmap(newVal, oldVal) {
      this.setPosition();
    }
  },
  methods: {
    close() {
      this.$emit("closeAmap");
    },
    initMap() {
      let self = this;
      self.map = new AMap.Map("areaContainer", {
        resizeEnable: true,
        showIndoorMap: true,
        //center: [self.bussinessInfo.Lng, self.bussinessInfo.Lat],
        zoom: 14,
        //地图是否可拖动
        dragEnable: true,
        animateEnable: false
      });
      this.map.addControl(this.$geolocation);
      AMap.event.addListener(this.$geolocation, "complete", this.onComplete);
      AMap.event.addListener(this.$geolocation, "error", this.onError);
      self.myPosition = new AMap.Marker({
        //icon: require("@/assets/images/location-ding.png")
        //position: [self.bussinessInfo.Lng, self.bussinessInfo.Lat],
        label: {
          content: "我的位置",
          offset: new AMap.Pixel(-20, -25)
        }
      });
      self.destination = new AMap.Marker({
        icon: require("@/assets/images/location-ding.png")
        //position: [self.bussinessInfo.Lng, self.bussinessInfo.Lat]
      });
      self.map.add(self.myPosition);
      self.map.add(self.destination);
      // 路线规划
      self.driving = new AMap.Driving({
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map: self.map,
        autoFitView: true
      });
    },
    setPosition() {
      this.map.setCenter([this.bussinessInfo.Lng, this.bussinessInfo.Lat]);
      // 设置目的地
      this.destination.setPosition([
        this.bussinessInfo.Lng,
        this.bussinessInfo.Lat
      ]);
      this.destination.setLabel({
        content: this.bussinessInfo.ContactAddress,
        offset: new AMap.Pixel(-70, -25)
      });
      this.$geolocation.getCurrentPosition();
    },
    // 定位成功
    onComplete(data) {
      //console.log(data);
      this.myPosition.setPosition([data.position.lng, data.position.lat]);
      this.map.setFitView();
      this.driving.search(
        this.myPosition.getPosition(),
        this.destination.getPosition(),
        function(status, result) {
          // 未出错时，result即是对应的路线规划方案
          //console.log(result);
        }
      );
    },
    // 定位失败
    onError(data) {
      //console.log(data);
      this.$toast.fail({
        message: "获取当前定位信息失败，请刷新",
        icon: "close"
      });
    }
  },
  mounted() {
    this.initMap();
  }
};
</script>

<style lang="scss" scoped>
.amap {
  max-width: 10rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3000;
  background: #f5f5f5;
  overflow-y: scroll;
}

#areaContainer {
  width: 750px;
  height: calc(100% - 100px);
  position: fixed;
  top: 100px;
  z-index: 2000;
}
</style>
